import React, { useMemo } from 'react'
import { Text, View, Image } from '@tarojs/components'
import i18n from '@I18N'
import Images from '@ASSET/Images'
import styles from './SurveyResult.module.scss'
const Dimensions = ({ dimensions, language }) => (
  <View className={styles.dimensionsContainer}>
    {dimensions.map((item, index) => {
      const { Name, Score } = item || {}
      const itemStyle = index !== dimensions.length - 1 ? ` ${styles.borderBottom}` : ''
      return (
        <View className={`${styles.dimensionsItem}${itemStyle}`} key={index}>
          <Text className={styles.dimensionsName}>{Name?.[language]}</Text>
          <Text className={styles.scoreText}>{(Score || 0).toFixed(2)}</Text>
        </View>
      )
    })}
  </View>
)

const Result = ({ result, resultDesc, language }) => {
  const isOnlyDesc = useMemo(() => !result?.[language] && resultDesc?.[language], [result, resultDesc, language])
  return (
    <View className={`${styles.resultContainer}${isOnlyDesc ? ` ${styles.resultOnlyDesc}` : ''}`}>
      {!!result?.[language] && <Text className={styles.resultText}>{result?.[language]}</Text>}
      {!!resultDesc?.[language] && <Text className={styles.resultDescText}>{resultDesc?.[language]}</Text>}
    </View>
  )
}
const SurveyResultCard = ({
  result, resultDesc, dimensions, language
}) => {
  const hasData = useMemo(
    () => Array.isArray(dimensions) && dimensions.length > 0 || result?.[language] || resultDesc?.[language],
    [dimensions, language, resultDesc, result]
  )
  const isHasDimensions = useMemo(() => Array.isArray(dimensions) && dimensions.length > 0, [dimensions])

  if (!hasData) return null
  return (
    <View className={styles.container}>
      <View className={styles.header}>
        <View className={styles.imageContainer}>
          <Image src={Images.survey.icon_survey_result} className={styles.image} />
        </View>
        <Text className={styles.decisionResult}>{i18n.patient.decision_result()}</Text>
      </View>
      {isHasDimensions ? <Dimensions dimensions={dimensions} language={language} />
        : <Result result={result} resultDesc={resultDesc} language={language} />}
    </View>
  )
}
export default SurveyResultCard
